<template>
  <div class="tabBar">
    <MenuSection
      title="全面监控"
      :expanded="isMenuExpanded"
      :items="monitorData"
      @toggle="toggleMenu('monitor')"
    />
    <MenuSection
      title="立体巡检"
      :expanded="isInspection"
      :items="inspectionData"
      @toggle="toggleMenu('inspection')"
    />
    <MenuSection
      title="综合管控"
      :expanded="isSynthesis"
      :items="synthesisData"
      @toggle="toggleMenu('synthesis')"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import MenuSection from "@/components/MenuSection.vue";
// 全面监控
const isMenuExpanded = ref(false);
// 立体巡检
const isInspection = ref(false);
// 综合管控;
const isSynthesis = ref(false);

// 全面监控
const monitorData = ref([
  { name: "智能检测" },
  { name: "辅助控制" },
  { name: "告警中心" },
  { name: "红外检测" },
]);

// 立体巡检
const inspectionData = ref([{ name: "高清视频巡检" }]);

// 综合管控
const synthesisData = ref([
  { name: "电子围栏" },
  { name: "消防管理" },
  { name: "智能锁控" },
  { name: "门禁管理" },
]);

const toggleMenu = (menuType) => {
  isMenuExpanded.value = menuType === "monitor";
  isInspection.value = menuType === "inspection";
  isSynthesis.value = menuType === "synthesis";
};
</script>


<style lang="scss" scoped>
.tabBar {
  width: 495px;
  position: fixed;
  bottom: 3%;
  left: 38%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 999;
}
</style>
